﻿@using System.IO
@using Kugar.Core.ExtMethod
@using Kugar.UI.Web.AdminLTE.Enums
@using Kugar.UI.Web.AdminLTE.Helpers
@using Kugar.UI.Web.AdminLTE.Helpers.FormExtMethod
@using Kugar.UI.Web.AdminLTE.Models
@using Kugar.UI.Web.AdminLTE.PageControls.PageForms
@using Kugar.UI.Web.AdminLTE.PageControls
@using Kugar.UI.Web.AdminLTE.PageControls.Helpers.ButtonExtMethod
@using Microsoft.AspNetCore.Mvc.ModelBinding
@using Newtonsoft.Json.Linq

@{
    WebUI.Title = "Index";
    WebUI.Subtitle = "sdfsdfs";

    WebUI.CurrentMenuKey = "Index";

    WebUI.Breadcrumbs = new[]
    {
new BreadcrumbItem("List", "/Home/List"),
new BreadcrumbItem("Index", "/Home/Index")
};
}

@section scripts{
    <script>
        $(function () {
            $("#table").on("change",
                "[name='rr']",
                function () {
                    console.log($(this).val());
                });
        });

        function OnSelectedCallback(data) {
            console.log('OnSelectedCallback');
            console.log(data);
        }

        function OnShowCallback() {
            console.log('OnShowCallback');
        }

        function SelectorChange(s) {
            console.log('SelectorChange', $(s).val());
        }

        function onModalSuccessCallback() {
            console.log('onModalSuccessCallback');
        }

        function onModalCloseCallback() {
            console.log('onModalCloseCallback');
        }

        function cmdCallback(re) {
            console.log('cmdCallback', re);
        }

        function addRow() {
            var tr = $('<tr class="" role="row">' +
                '<input type="hidden" name="hide" value="">' +
                '<td class="" style = "" >' +
                '<div class="webui_data_cell ">' +
                '<input type="checkbox" id="" value="2" name="cc" title="" lay-skin="primary">' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell ">' +
                '<input type="radio" id="" value="2" name="rr" title="" lay-skin="primary">' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell "><span style="color:cornflowerblue;">ssssss</span>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell "><div>' +
                '<button class="btn btn-default" type="button">btn</button>' +
                '</div>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell "><span><span style="color:cornflowerblue;">Label</span></span><div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell "><input lay-ignore="" class="form-control textbox" id="" name="tt" value="Textbox" placeholder=""> <div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell "><select id="" class="form-control" lay-ignore="" onchanged="" name="ss">' +
                '<option value="-1">select</option>' +
                '<option value="0" selected="">s0</option>' +
                '<option value="1">s1</option>' +
                '</select>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="width:auto;min-width:200px;">' +
                '<div class="webui_data_cell ">' +
                '<div class="input-group" id="">' +
                '<input lay-ignore="" readonly="" class="form-control textbox" name="tb" value="ddd" placeholder="">' +
                '<input type="hidden" value="" name="">' +
                '<span class="input-group-btn">' +
                '<button type="button" class="datapickerbtn btn btn-success" data-showdatapicker="/Home/DataPicker" data-selectedcallback="OnSelectedCallback" data-showcallback="OnShowCallback" data-option="{&quot;StoreInCache&quot;:false}">select</button></span>' +
                '</div>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="">' +
                '<div class="webui_data_cell">' +
                '<div class="cell-image" style="width:100px;height:100px;">' +
                '<img src="http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg" onerror="this.src=\"/adminltebase/Content/images/picerror_80_80.jpg\";"><span class="vertical-middle"></span>' +
                '</div>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '<td class="" style="width:auto;min-width:200px;">' +
                '<div class="webui_data_cell">' +
                '<div class="datetimepicker cell-datetimepicker" data-format="yyyy-MM-dd" data-pickertype="Date" data-maxdt="" data-mindt="" data-disabled="False">' +
                '<div class="input-group">' +
                '<input type="text" placeholder="" value="" name="" class="form-control">' +
                '<span class="input-group-btn"><button type="button" class="btn btn-info datetimepickershow"><i class="fa fa-calendar"></i></button></span>' +
                '</div>' +
                '</div>' +
                '<div class="clearfix"></div>' +
                '</div>' +
                '</td>' +
                '</tr>');

            //$("#table tbody").append(tr);
            //$("#table").find("[name^='dd_']").removeAttr("lay-key");
            //$("#table").simpleTable().refresh();

            $("#table").DataTable().row.add(tr).draw();

            WebUIJS.RefreshEvent(tr);
        }

        function showFootModal() {
            WebUIJS.ModalByElement($("#FootModal"));
        }

        $(function () {
            setTimeout(function () {
                $(".dataTable td")
                    .addClass("has-error")
                    .append("<div class='cell-error-block' data-errormsg='错误信息错误信息错误信息错误信息错误信息'></div>");

                $(".cell-error-block")
                    .mouseenter(function () {
                        var index = layer.tips(
                            "<span style='color:#fff;'>" + $(this).find(".field-errormsg").text() + "</span>",
                            this,
                            {
                                tips: [2, "#dd4b39"],
                                time: 0
                            }
                        );
                        $(this).data("tipsindex", index);
                    })
                    .mouseleave(function () {
                        layer.close($(this).data("tipsindex"));
                    });
            }, 1000);
        });

                                    //$(function () {
                                    //    $(".tree-select .tree-select-title").click(function () {
                                    //        var selector = $(this).closest(".tree-select");
                                    //        selector.toggleClass("tree-select-open");
                                    //        selector.children(".tree-select-content").slideToggle(200);
                                    //    });

                                    //    $(document).click(function (e) {
                                    //        var target = $(e.target);
                                    //        var selectors = $(".tree-select.tree-select-open");

                                    //        if (target.hasClass("tree-select")) {
                                    //            selectors = selectors.not(target);
                                    //        }

                                    //        if (target.closest(".tree-select").length > 0) {
                                    //            selectors = selectors.not(target.closest(".tree-select"));
                                    //        }

                                    //        selectors.removeClass("tree-select-open");
                                    //        selectors.children(".tree-select-content").slideUp(200);
                                    //    });

                                    //    $(".tree-select .tree-select-option")
                                    //        .jstree({
                                    //            "core": {
                                    //                "check_callback": true,
                                    //                "multiple": false,
                                    //                "themes": {
                                    //                    "icons": false,
                                    //                    "dots": false
                                    //                }
                                    //            },
                                    //            "plugins": ["wholerow"]
                                    //        })
                                    //        //.on("select_node.jstree", function (event, data) {
                                    //        //})
                                    //        .on("changed.jstree", function (event, data) {
                                    //            var tree = $(this).jstree(true);
                                    //            if (data.selected.length > 0) {
                                    //                var node = tree.get_node(data.selected[0]);

                                    //                var selector = $(this).closest(".tree-select");
                                    //                var selectorTitle = selector.children(".tree-select-title");

                                    //                selectorTitle.children(".tree-select-text").val(node.text.trim()).change();
                                    //                selectorTitle.children(".tree-select-value").val(node.id).change();

                                    //                if (selector.hasClass("tree-select-open")) {
                                    //                    selectorTitle.click();
                                    //                }

                                    //                if (selector.data("autosubmit").toLowerCase() === "true") {
                                    //                    var jstreeData = node.data.jstree;
                                    //                    if (!(jstreeData !== undefined && jstreeData !== null && jstreeData.selected)) {
                                    //                        $(this).closest("form").submit();
                                    //                    }
                                    //                }
                                    //            }
                                    //        })
                                    //        .on("ready.jstree", function (event) {
                                    //            var tree = $(this).jstree(true);
                                    //            tree.open_all();
                                    //        });
                                    //});
    </script>
}

@using (var frm = WebUI.Control.Form().WithBox().DefaultLabelWidth(2).Enctype(FormEnctype.multipart).ID("form").Post().Render())
{
    @WebUI.Control.Hidden().Name("hideVal").Value("123").Render()

    using (frm.AddFieldGroup().Title("FieldGroup.Col_2").DefaultLabelWidth(4).Column(PageForm_FieldsGroup.ColEnum.Col_2).Render())
    {
        @frm.AddTextBox().Tips("aaa").Label("label").Required().Value("sdfsdfsd").Render()

        @frm.AddLabel().Tips("aaa").Label("label").Value("sdfsdfsd").Render()

        <style>
            .tangram-suggestion-main {
                z-index: 9999;
            }
            .tree-select {
                position: relative;
            }

            .tree-select > .tree-select-title {
                width: 100%;
            }

            .tree-select > .tree-select-title > .tree-select-text {
                width: 100%;
                height: 34px;
                line-height: 34px;
                padding: 0 30px 0 10px;
                display: block;
                border: 1px solid #e6e6e6;
                background-color: #fff;
                outline: 0;
                box-sizing: border-box;
                cursor: pointer;
            }

            .tree-select > .tree-select-title > .tree-select-text:hover {
                border-color: #D2D2D2;
            }

            .tree-select > .tree-select-title > .tree-select-text:focus {
                border-color: #C9C9C9;
            }

            .tree-select > .tree-select-title > .tree-select-triangle {
                display: inline-block;
                width: 0;
                height: 0;
                position: absolute;
                right: 10px;
                top: 50%;
                margin-top: -3px;
                border: 6px solid transparent;
                border-top-color: #c2c2c2;
                cursor: pointer;
                transition: all .3s;
            }

            .tree-select.tree-select-open > .tree-select-title > .tree-select-triangle {
                margin-top: -9px;
                transform: rotate(180deg);
            }

            .tree-select > .tree-select-content {
                min-width: 100%;
                max-height: 300px;
                overflow: auto;
                border: 1px solid #C9C9C9;
                background-color: #fff;
                position: absolute;
                left: 0;
                top: 39px;
                z-index: 10;
                display: none;
            }

            .tree-select > .tree-select-content > .tree-select-option.jstree-default .jstree-wholerow-hovered {
                background: #f2f2f2;
            }

            .tree-select > .tree-select-content > .tree-select-option.jstree-default .jstree-wholerow-clicked {
                background: #5FB878;
            }

            .group-fullrow {
                width:100%
            }
        </style>

        <div class="form-group webui-form_formfield webui-form_selectorfield">
            <label class="col-sm-4 control-label">
                <i class="fa fa-fw fa-asterisk requiredfield_label"></i>selector_Tree
            </label>
            <div class="col-sm-8 control-content">
                <div class="input-group row" style="width:70% !important;">

                    <div class="tree-select" data-autosubmit="False">
                        <div class="tree-select-title">
                            <input type="text" placeholder="请选择" readonly class="tree-select-text">
                            <input type="hidden" class="tree-select-value">
                            <i class="tree-select-triangle"></i>
                        </div>
                        <div class="tree-select-content">
                            <div class="tree-select-option">
                                <ul>
                                    <li data-jstree='{"selected" : true}' id="100">
                                        111<ul>
                                            <li id="101">111_1</li>
                                            <li id="102">111_2</li>
                                        </ul>
                                    </li>
                                    <li id="200">
                                        222<ul>
                                            <li id="201">222_1</li>
                                            <li id="202">222_2</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                </div>
                <span class="input-group-addon tips">aaa</span>
                <div class="clearfix"></div>
                <span class="field-errormsg help-block"></span>
                <div class="clearfix"></div>
            </div> <!-- end control-content -->
            <div class="clearfix"></div>
        </div>
    }

    using (frm.AddFieldGroup().Title("FieldGroup.Col_2").TitleFontSize(16).DefaultLabelWidth(2).Column(PageForm_FieldsGroup.ColEnum.Col_2).Render())
    {
        <div class="group-fullrow">
            @frm.AddLabel().Tips("tips").Label("label").Value("aaaaaaaa").Render()

            @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()
        </div>
        
        <div class="group-fullrow">
            @frm.AddTextBox().Tips("tips").Label("label").FullRow().Value("bbbbbbbb").Render()

            @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()
        </div>

    }

    <style>
        @@media (min-width: 1440px) {
            .content > .content-body > .box > .box-body > .form-horizontal.weui-form_formcontainer {
                /*width: 80%;*/
                padding-left: 30px;
            }
        }

        @@media (min-width: 1440px) {
            .content > .content-body > .box > .box-body > .form-horizontal.weui-form_formcontainer > .box-body > .webui-form_formfield {
                width: 80%;
            }
        }
    </style>

    using (frm.AddFieldGroup().Title("FieldGroup.Col_3").TitleFontSize(16).Column(PageForm_FieldsGroup.ColEnum.Col_3).Render())
    {
        @frm.AddLabel().Tips("tips").Label("label").Value("aaaaaaaa").Render()

        @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()

        @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()

        @frm.AddLabel().Tips("tips").Label("label").FullRow().Value("bbbbbbbb").Render()


        @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()

        @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()

        
    }


    using (frm.AddFieldGroup().Title("FieldGroup.Col_1").TitleFontSize(16).DefaultLabelWidth(2).Column(PageForm_FieldsGroup.ColEnum.Col_1).Render())
    {
        @frm.AddLabel().Tips("tips").Label("label").Value("aaaaaaaa").Render()

        @frm.AddLabel().Tips("tips").Label("label").Value("bbbbbbbb").Render()
    }

    @frm.AddTextBoxWithButton().Label("getgeo").Name("ssss").ID("btnGeo").ShowGeoPickerInitFromElelemtn("#btnGeo :text",onSuccessCallback:"$('#txtLng :text').val(data.lng + ',' + data.lat);").Render();

    @frm.AddTextBox().Tips("aaa").Required().Label("textbox").Value("00").Name("txt").ID("txtLng").Render()

    @frm.AddSelector().Tips("aaa").Label("selector").Required().FirstItem(new SelectorItem("select", "-1")).Options(new[]
                                                {
                                                    new SelectorItem("s0", "0"),
                                                    new SelectorItem("s1", "1"),
                                                    new SelectorItem("s2", "2"),
                                                }).Name("select").CurrentValue(1).OnChangedScript("SelectorChange(this);").Render()

    @frm.AddDatetime().Tips("aaa").ValueLimit(DateTime.Now.AddDays(-5), DateTime.Now.AddDays(5)).ReadOnly().Label("datetimepicker").Name("date").Required().Value(DateTime.Now).Type(DatetimePickerType.Datetime).Format("yyyy-MM-dd HH:mm:ss").Render()

    @frm.AddDatetimeRange().Required().Disabled(false).Tips("aaa").Label("datetimerange").ReadOnly(true, true).ValueLimit(DateTime.Now.AddDays(-5), DateTime.Now.AddDays(5)).Name("startDt", "endDt").Value(DateTime.Now, DateTime.Now).Type(DatetimePickerType.Datetime).Format("yyyy-MM-dd HH:mm:ss").Render()

    @frm.AddLabel().Tips("aaa").Label("label").Value("sdfsdfsd").Render()

    @frm.AddValueRange().Required().Tips("aaa").Label("valuerange").Value("322", "222").Tips("ffkkkkkk000").Name("startVal", "endVal").Type(InputElementType.number).Render()

    @frm.AddCheckBoxList().Tips("aaa").Label("checkboxlist").Options(new[]
                                                    {
                                                        new SelectorItem("c0", "0"),
                                                        new SelectorItem("c1", "1"),
                                                        new SelectorItem("c2", "2"),
                                                    }).Checked(new[] { "0", "1" }).Name("checkbox").Required().Render()

    @frm.AddTextBoxWithButton().Href("/Home/List").ButtonIconCss("").ButtonText("GoToList").Tips("aaa").SelectedOnClick().Label("textboxwithbutton").Value("GoToList").Name("txtBtn1").ReadOnly().Required().Render()

    @frm.AddTextBoxWithButton().ButtonIconCss("").ButtonText("select").Tips("aaa").ButtonColor(ColorPaletteEnum.lazur).ShowDataPicker("/Home/DataPicker", new JObject()
    {
        {"[name='txtBtnID2']","UserID" },
        {"[name='txtBtn2']","UserName1" },
    }, "OnShowCallback").SelectedOnClick().Label("datapicker").ReadOnly().Value("fillconfig").Name("txtBtn2").WithHiddenValue("100", "txtBtnID2").Required().Render()

    @frm.AddTextBoxWithButton().ButtonIconCss("").Tips("aaa").ButtonColor(ColorPaletteEnum.success).ButtonText("select").ShowDataPicker("/Home/DataPicker", "OnSelectedCallback", "OnShowCallback").Value("callback").Label("datapicker").Name("txtBtn3").ReadOnly().Required().Render()

    @frm.AddRadioList().Tips("aaa").Label("radiolist").Options(new[]
                                                {
                                                    new SelectorItem("r0", "0"),
                                                    new SelectorItem("r1", "1"),
                                                    new SelectorItem("r2", "2"),
                                                }).Name("radio").Checked("-1").Required().Render()

    @frm.AddFileUpload().Tips("aaa").UploadUrl("/Home/UploadFile").Label("fileupload").Src("").Name("file").Required().Render()

    @frm.AddImageUpload().Tips("aaa").Crop(600,300).UploadUrl("/Home/UploadFile").Label("imageupload").Src("").Name("img").Size(300, 100).Required().Render()

    @frm.AddCityPicker().Tips("aaa").Level(CityPickerLevelEnum.district).Label("citypicker").ValueByName("广东省").Name("pcd").WithAddressBox("addr", "黄河路200000号", @readonly: false).Required().Render()

    @frm.AddMultiFileUpload().Tips("aaa").UploadUrl("/Home/UploadFile").FileUrls(new[] { new SelectorItem("文件1", "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg") }).Label("multifileupload").Name("multiFile").Required().Render()

    @(frm.AddMultiFileUpload().UploadUrl("/Home/UploadFile").FileUrls(new []
    {
        new UploadFileInfo("ssss.pdf","/ssss.pdf",mime:"application/pdf"), 
        new UploadFileInfo("ssss.jpg","/ssss.jpg",mime:"image/jpeg"), 
        new UploadFileInfo("1111.xls","/1111.xls",mime:"application/sheet"), 
        new UploadFileInfo("2222.doc","/2222.doc",mime:"application/msword"), 
        new UploadFileInfo("55555.txt","/2222.txt",mime:"application/file"), 
    }).Label("new uploader").Name("newupload").Render())

    @frm.AddMultiImageUploader().Tips("aaa").Crop(600,300).UploadUrl("/Home/UploadFile").Images(new[] { "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg" }).Label("MultiImage").Name("MultiImage").Required().Render()

    @frm.AddMultiImageUploader().Tips("aaa").Crop(600,300).UploadUrl("/Home/UploadFile").Images(new[] { "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg" }).Label("MultiImage").Name("MultiImage").LimitFileCount(5).Required().Render()


    @frm.AddTextarea().Tips("aaa").Label("Textarea").Name("Textarea").Value("ff").Rows(3).Required().Render()

    @frm.AddSummerNote().Label("SummerNote").ControlWidth("100%").Value("").UploadUrl("/Home/UploadFile").Placeholder("edit now").Height("100px").Name("sum").Required().Render()

    @(frm.AddTreeViewSelector().Label("Tree").Name("TreeSelector").MultiSelect(true).MaxLevel(1)
                                                          //      .Root(new []
                                                          //{
                                                          //    ("root1","1"),
                                                          //    ("root2","2"),
                                                          //    ("root3","3"),
                                                          //    ("root4","4"),
                                                          //    ("root5","5"),
                                                          //})
                                                          .Children(x =>
                                                          {
                                                              return new[]
                                                              {
($"{x.Title}_Child1",$"{x.Value}_1"),
($"{x.Title}_Child2",$"{x.Value}_2"),
($"{x.Title}_Child3",$"{x.Value}_3"),
($"{x.Title}_Child4",$"{x.Value}_4"),
                                                        };
                                                          }).OnChangedScript("console.log(e.join())").OnItemClickCallback(x => "console.log('click')").SelectedValues(new[] { "4", "2_1" }).Render())

    @frm.AddCustomContent().Label("CustomContent").Required().Content(@<div>
        @WebUI.Control.Button().Text("showModal").ShowModal("/Home/ModalWindow", onSuccessCallback: "onModalSuccessCallback", onCloseCallback: "onModalCloseCallback",disabledShadeClose:true).Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.primary).Render()
        @WebUI.Control.Button().Text("FootModal").OnClick("showFootModal();").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.primary).Render()
    </div>).Render()

    using (frm.AddCustomContainer().Required().Label("Container").WithNameError("Container").Render())
    {
        @*@frm.AddCustomContent().Content(WebUI.Control.Button().Text("addRow").OnClick("addRow();").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.success)).Render()*@
        @frm.AddCustomContent().Content(@<div>
            @WebUI.Control.Button().Text("addRow").OnClick("addRow();").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.success).Render()
        </div>).Render()

        using (var tb = WebUI.Control.Table<object>().ID("table").Data(new object[0]).FillRowCount(3).AddRowHiddenValue(x => ("hide", $"{x}")).NoWrap().Render())
        {
            @*@tb.Columns.AddCustomContent().Content(@<div>
                    <p>@Html.ValidationMessage($"cc_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"rr_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"tt_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"ss_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"tb_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"tbID_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"ii_{tb.CurrentRowIndex}")</p>
                    <p>@Html.ValidationMessage($"dd_{tb.CurrentRowIndex}")</p>
                </div>)*@

            @tb.Columns.AddCheckbox().ColumnTitle("").Checked(x => true).Name(x => $"cc_{tb.CurrentRowIndex}").Value(x => tb.CurrentRowIndex.ToString())

            @tb.Columns.AddRadio().ColumnTitle("Radio").Checked(x => true).Name(x => $"rr_{tb.CurrentRowIndex}").Label(x => "").Value(x => tb.CurrentRowIndex.ToString())

            @tb.Columns.AddCustomContent().ColumnTitle("custom").Content(x => "<span style='color:cornflowerblue;'>ssssss</span>")

            @tb.Columns.AddCustomContent().ColumnTitle("custom2").Content(@<div>
                @WebUI.Control.Button().Text("btn").Type(ButtonTypeEnum.button).Render()
            </div>)

            @tb.Columns.AddLabel().ColumnTitle("Label").Value(x => "<span style='color:cornflowerblue;'>Label</span>")

            @tb.Columns.AddTextbox().ColumnMaxWidth(200).ColumnTitle("Textbox").Value(x => "").Name(x => $"tt_{tb.CurrentRowIndex}")

            @tb.Columns.AddSelector().ColumnTitle("Selector").CurrentValue(x => "0").Name(x => $"ss_{tb.CurrentRowIndex}").FirstItem(new SelectorItem("select", "-1")).Options(new[] { new SelectorItem("s0", "0"), new SelectorItem("s1", "1"), })

            @tb.Columns.AddTextboxWithButton().ColumnWidth("auto").ColumnMinWidth(200).ShowDataPicker((x, y) => y.SetUrl("/Home/DataPicker").OnSelectedCallback("OnSelectedCallback").OnShowCallback("OnShowCallback")).ColumnTitle("TextboxWithButton").TextboxReadOnly(true).Name(x => $"tb_{tb.CurrentRowIndex}").Value(x => "ddd").WithHiddenValue(x => ($"tbID_{tb.CurrentRowIndex}", "101")).ButtonColor(ColorPaletteEnum.success).ButtonText("select")

            @tb.Columns.AddImage().ColumnTitle("Image").Src(x => "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg").WithHiddenValue(x => ($"ii_{tb.CurrentRowIndex}", "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg"))

            @tb.Columns.AddDatetime().ColumnTitle("Datetime").ColumnWidth("auto").ColumnMinWidth(200).Name(x => $"dd_{tb.CurrentRowIndex}")
        }
    }

    @*@WebUI.Control.PanelBox().Title("PanelBox").Collapsable().Removable(tips: "delete?").Render()*@
    using (WebUI.Control.PanelBoxContainer().Title("PanelBox").Collapsable().Removable(tips: "delete?").Render())
    {

    }

    @WebUI.Control.InfoBox().IconCss("fa-windows").AddNumber("100").AddText("aaa").WithBackgroundColor().Color(ColorPaletteEnum.info).Render()

    @WebUI.Control.Callout().Title("title").Text("").Color(ColorPaletteEnum.info).Render()

    @*@WebUI.Control.Carousel().ImageUrls(new[] { new SelectorItem("title", "http://pic.58pic.com/58pic/17/19/64/18Q58PICmXU_1024.jpg") }).Render()*@

    @WebUI.Control.Progress().MinValue(0).MaxValue(100).CurrentValue(80).Size(ProgressSizeEnum.normal).Direction(DirectionTypeEnum.Horizontal).Color(ColorPaletteEnum.success).Render()

    @WebUI.Control.Tree().Root(new[]
    {
        ("root1","root1"),
        ("root2","root2"),
        ("root3","root3"),
        ("root4","root4"),
        ("root5","root5"),
    }).Children(x =>
    {
        if (x.Value.IndexOf("_") > 0)
        {
            return null;
        }
        return new[]
        {
            ($"{x.Title}_Child1",$"{x.Title}_Child1"),
            ($"{x.Title}_Child2",$"{x.Title}_Child2"),
            ($"{x.Title}_Child3",$"{x.Title}_Child3"),
            ($"{x.Title}_Child4",$"{x.Title}_Child4"),
        };
    }).SelectedValues(new[] { "root4", "root2_Child1" }).MultiSelect(true).Render()

    //    WebUI.Control.Tree<JObject>().Source(new[]{
    //new JObject {["Title"] = "111", ["Children"] = new JArray() {new JObject {["Title"] = "1_aaa"}, new JObject {["Title"] = "1_bbb", ["Children"] = new JArray() {new JObject {["Title"] = "1_b_##"}, new JObject {["Title"] = "1_b_&&"}}}}},
    //new JObject {["Title"] = "222", ["Children"] = new JArray() {new JObject {["Title"] = "2_aaa"}, new JObject {["Title"] = "2_bbb"}}},
    //new JObject {["Title"] = "333", ["Children"] = new JArray() {new JObject {["Title"] = "3_aaa"}, new JObject {["Title"] = "3_bbb"}}},
    //})
    //        .Checked(x => x.GetString("Title") == "1_aaa" || x.GetString("Title") == "1_b_##" || x.GetString("Title") == "3_bbb")
    //        .Children(x => x.GetJObjectArray("Children"))
    //        .Value(x => x.GetString("Title"))
    //        .Title(x => x.GetString("Title"))
    //        .ID(x => x.GetString("Title"))
    //        .ToggleNodeOnClick(false)
    //        .OnClickCallback(x => "console.log('fff');")
    //        .Render();

    frm.AddButtonList()
        .AddButton(x => x.Text("save").Type(ButtonTypeEnum.submit).Color(ColorPaletteEnum.success))
        .AddButton(x => x.Text("showGeoPicker").Type(ButtonTypeEnum.button).OnClick("WebUIJS.ShowLocationSelector(function(pos){debugger;},{lng: 113.270793, lat: 23.135308})").Color(ColorPaletteEnum.success))

        .AddButton(x => x.Text("cancel").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.@default))
        .AddButton(x => x.Text("Index").Href("/Home/Index").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.info))
        .AddButton(x => x.Text("ModalWindow").ShowModal("/Home/ModalWindow",refreshOnClose:true).Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.primary))
        .AddButton(x => x.Text("DataPicker").ShowDataPicker("/Home/DataPicker", "OnSelectedCallback", "OnShowCallback").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.success))
        .AddButton(x => x.Text("ShowFileUpload").ShowUploadFile("/Home/UploadFile",onSuccessCallback: "OnSelectedCallback", onFailCallback: "OnShowCallback",tips:"是否确定上传?").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.success))
        .AddButton(x => x.Text("显示").ExecuteCmd("/Home/Operation", "show", new JObject() { { "ID", 100 } }, "cmdCallback").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.warning))
        .AddButton(x => x.Text("ShowFileViewer").OnClick("WebUIJS.ShowFileViewer('/dummy.pdf')").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.warning))
        .Render();

    //frm.AddButtonList().LabelWidth(0)
    //    .AddButton(x => x.Text("default").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.@default))
    //    .AddButton(x => x.Text("primary").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.primary))
    //    .AddButton(x => x.Text("success").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.success))
    //    .AddButton(x => x.Text("info").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.info))
    //    .AddButton(x => x.Text("warning").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.warning))
    //    .AddButton(x => x.Text("danger").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.danger))
    //    .AddButton(x => x.Text("lazur").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.lazur))
    //    .AddButton(x => x.Text("gray").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.gray))
    //    .AddButton(x => x.Text("teal").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.teal))
    //    .AddButton(x => x.Text("aqua").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.aqua))
    //    .AddButton(x => x.Text("navy").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.navy))
    //    .AddButton(x => x.Text("cornflowerblue").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.cornflowerblue))
    //    .AddButton(x => x.Text("ghostwhite").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.ghostwhite))
    //    .AddButton(x => x.Text("azure").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.azure))
    //    .AddButton(x => x.Text("lightcyan").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.lightcyan))
    //    .AddButton(x => x.Text("honeydew").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.honeydew))
    //    .AddButton(x => x.Text("lightyellow").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.lightyellow))
    //    .AddButton(x => x.Text("lavenderblush").Type(ButtonTypeEnum.button).Color(ColorPaletteEnum.lavenderblush))
    //    .Render();
}

@section footer{
    @using (WebUI.Control.ModalWindow().Title("FootModal").ID("FootModal").Style("display", "none")
.ContentWidth(600).ContentHeight(400)
.AddRightButton(x => x.Text("save").Type(ButtonTypeEnum.submit).Color(ColorPaletteEnum.success))
.Render())
    {
        using (var form = WebUI.Control.Form().Post().UpdateElementID("FootModal").Render())
        {
            @form.AddLabel().Label("Label").Value("。。。。。。").Tips("devil.....").Render()
        }
    }
}